<style>
    .buttonItem { width: 200px; height: 120px; text-align: center; border: 1px solid #ccc; float: left; margin: -1px 0 0 -1px;}
    .buttonItem span { line-height: 50px; font-size: 20px;}

</style>

<div class="page">
    <h1>按钮样式 及 图标样式 Buttons</h1>
    <div class="line"></div>
    <br>
    <p></p>
    <pre class="line-numbers"><code class="language-html">&lt;!-- 正常尺寸按钮 --&gt;
&lt;!-- exchange 为按钮关键字 --&gt;
&lt;div class="layui-btn layui-btn-ys"&gt;
    &lt;i class="buttonIcon exchange"&gt;&lt;/i&gt; exchange
&lt;/div&gt;</code></pre>

    <pre class="line-numbers"><code class="language-html">&lt;!-- 小尺寸按钮 --&gt;
&lt;!-- exchange 为按钮关键字 --&gt;
&lt;div class="layui-btn layui-btn-sm layui-btn-ys"&gt;
    &lt;i class="buttonIcon exchange"&gt;&lt;/i&gt; exchange
&lt;/div&gt;</code></pre>
    <br>
    <br>
    <div style="clear: both;">
        <div class="line"></div>
        <h2>正常尺寸按钮</h2>
        <br>
        <div class="buttonItem"> <span> add</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon add"></i> add
            </div>
        </div>
        <div class="buttonItem"> <span> list</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon list"></i> list
            </div>
        </div>
        <div class="buttonItem"> <span> squareAdd</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon squareAdd"></i> squareAdd
            </div>
        </div>
        <div class="buttonItem"> <span> block</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon block"></i> block
            </div>
        </div>
        <div class="buttonItem"> <span> link</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon link"></i> link
            </div>
        </div>
        <div class="buttonItem"> <span> check</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon check"></i> check
            </div>
        </div>
        <div class="buttonItem"> <span> interactive</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon interactive"></i> interactive
            </div>
        </div>
        <div class="buttonItem"> <span> interactiveIcon</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon interactiveIcon"></i> interactiveIcon
            </div>
        </div>
        <div class="buttonItem"> <span> squarePoint</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon squarePoint"></i> squarePoint
            </div>
        </div>
        <div class="buttonItem"> <span> circularPoint</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon circularPoint"></i> circularPoint
            </div>
        </div>
        <div class="buttonItem"> <span> notebook</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon notebook"></i> notebook
            </div>
        </div>
        <div class="buttonItem"> <span> clock</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon clock"></i> clock
            </div>
        </div>
        <div class="buttonItem"> <span> select</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon select"></i> select
            </div>
        </div>
        <div class="buttonItem"> <span> exchange</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon exchange"></i> exchange
            </div>
        </div>
        <div class="buttonItem"> <span> exchange</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon exchange"></i> exchange
            </div>
        </div>
        <div class="buttonItem"> <span> squareExchange</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon squareExchange"></i> squareExchange
            </div>
        </div>
        <div class="buttonItem"> <span> noNotes</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon noNotes"></i> noNotes
            </div>
        </div>
        <div class="buttonItem"> <span> prohibit</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon prohibit"></i> prohibit
            </div>
        </div>
        <div class="buttonItem"> <span> prohibit</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon prohibit"></i> prohibit
            </div>
        </div>
        <div class="buttonItem"> <span> treeStructure</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon treeStructure"></i> treeStructure
            </div>
        </div>
        <div class="buttonItem"> <span> stars</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon stars"></i> stars
            </div>
        </div>
        <div class="buttonItem"> <span> fillIn</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon fillIn"></i> fillIn
            </div>
        </div>
        <div class="buttonItem"> <span> deal</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon deal"></i> deal
            </div>
        </div>
        <div class="buttonItem"> <span> cooperation</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon cooperation"></i> cooperation
            </div>
        </div>
        <div class="buttonItem"> <span> listBook</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon listBook"></i> listBook
            </div>
        </div>
        <div class="buttonItem"> <span> close</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon close"></i> close
            </div>
        </div>
        <div class="buttonItem"> <span> setUp</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon setUp"></i> setUp
            </div>
        </div>
        <div class="buttonItem"> <span> delete</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon delete"></i> delete
            </div>
        </div>
        <div class="buttonItem"> <span> bigLink</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon bigLink"></i> bigLink
            </div>
        </div>
        <div class="buttonItem"> <span> greenClock</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon greenClock"></i> greenClock
            </div>
        </div>
        <div class="buttonItem"> <span> greenClock</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon greenClock"></i> greenClock
            </div>
        </div>
        <div class="buttonItem"> <span> purpleLeaves</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon purpleLeaves"></i> purpleLeaves
            </div>
        </div>
        <div class="buttonItem"> <span> firstIcon</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon firstIcon"></i> firstIcon
            </div>
        </div>
        <div class="buttonItem"> <span> partner</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon partner"></i> partner
            </div>
        </div>
        <div class="buttonItem"> <span> seal</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon seal"></i> seal
            </div>
        </div>
        <div class="buttonItem"> <span> sealBook</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon sealBook"></i> sealBook
            </div>
        </div>
        <div class="buttonItem"> <span> editIcon</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon editIcon"></i> editIcon
            </div>
        </div>
        <div class="buttonItem"> <span> redDeal</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon redDeal"></i> redDeal
            </div>
        </div>
        <div class="buttonItem"> <span> voice</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon voice"></i> voice
            </div>
        </div>
        <div class="buttonItem"> <span> hammer</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon hammer"></i> hammer
            </div>
        </div>
        <div class="buttonItem"> <span> volume</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon volume"></i> volume
            </div>
        </div>
        <div class="buttonItem"> <span> left</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon left"></i> left
            </div>
        </div>
        <div class="buttonItem"> <span> square</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon square"></i> square
            </div>
        </div>
        <div class="buttonItem"> <span> down</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon down"></i> down
            </div>
        </div>
        <div class="buttonItem"> <span> right</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon right"></i> right
            </div>
        </div>
        <div class="buttonItem"> <span> refresh</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon refresh"></i> refresh
            </div>
        </div>
        <div class="buttonItem"> <span> forward</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon forward"></i> forward
            </div>
        </div>
        <div class="buttonItem"> <span> dev</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon dev"></i> dev
            </div>
        </div>
        <div class="buttonItem"> <span> mailList</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon mailList"></i> mailList
            </div>
        </div>
        <div class="buttonItem"> <span> headPortrait</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon headPortrait"></i> headPortrait
            </div>
        </div>
        <div class="buttonItem"> <span> timeLoop</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon timeLoop"></i> timeLoop
            </div>
        </div>
        <div class="buttonItem"> <span> searchFat</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon searchFat"></i> searchFat
            </div>
        </div>
        <div class="buttonItem"> <span> software</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon software"></i> software
            </div>
        </div>
        <div class="buttonItem"> <span> concentricCircle</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon concentricCircle"></i> concentricCircle
            </div>
        </div>
        <div class="buttonItem"> <span> searchThin</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon searchThin"></i> searchThin
            </div>
        </div>
        <div class="buttonItem"> <span> car</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon car"></i> car
            </div>
        </div>
        <div class="buttonItem"> <span> officialSeal</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon officialSeal"></i> officialSeal
            </div>
        </div>
        <div class="buttonItem"> <span> schedule</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon schedule"></i> schedule
            </div>
        </div>
        <div class="buttonItem"> <span> status</span> <br>
            <div class="layui-btn layui-btn-ys">
                <i class="buttonIcon status"></i> status
            </div>
        </div>
    </div>
    <br>
    <br>

    <div style="clear: both;">
        <div class="line"></div>
        <h2>小型尺寸按钮</h2>
        <br>
        <div class="buttonItem"> <span> add</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon add"></i> add
            </div>
        </div>
        <div class="buttonItem"> <span> list</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon list"></i> list
            </div>
        </div>
        <div class="buttonItem"> <span> squareAdd</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon squareAdd"></i> squareAdd
            </div>
        </div>
        <div class="buttonItem"> <span> block</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon block"></i> block
            </div>
        </div>
        <div class="buttonItem"> <span> link</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon link"></i> link
            </div>
        </div>
        <div class="buttonItem"> <span> check</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon check"></i> check
            </div>
        </div>
        <div class="buttonItem"> <span> interactive</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon interactive"></i> interactive
            </div>
        </div>
        <div class="buttonItem"> <span> interactiveIcon</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon interactiveIcon"></i> interactiveIcon
            </div>
        </div>
        <div class="buttonItem"> <span> squarePoint</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon squarePoint"></i> squarePoint
            </div>
        </div>
        <div class="buttonItem"> <span> circularPoint</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon circularPoint"></i> circularPoint
            </div>
        </div>
        <div class="buttonItem"> <span> notebook</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon notebook"></i> notebook
            </div>
        </div>
        <div class="buttonItem"> <span> clock</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon clock"></i> clock
            </div>
        </div>
        <div class="buttonItem"> <span> select</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon select"></i> select
            </div>
        </div>
        <div class="buttonItem"> <span> exchange</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon exchange"></i> exchange
            </div>
        </div>
        <div class="buttonItem"> <span> exchange</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon exchange"></i> exchange
            </div>
        </div>
        <div class="buttonItem"> <span> squareExchange</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon squareExchange"></i> squareExchange
            </div>
        </div>
        <div class="buttonItem"> <span> noNotes</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon noNotes"></i> noNotes
            </div>
        </div>
        <div class="buttonItem"> <span> prohibit</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon prohibit"></i> prohibit
            </div>
        </div>
        <div class="buttonItem"> <span> prohibit</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon prohibit"></i> prohibit
            </div>
        </div>
        <div class="buttonItem"> <span> treeStructure</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon treeStructure"></i> treeStructure
            </div>
        </div>
        <div class="buttonItem"> <span> stars</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon stars"></i> stars
            </div>
        </div>
        <div class="buttonItem"> <span> fillIn</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon fillIn"></i> fillIn
            </div>
        </div>
        <div class="buttonItem"> <span> deal</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon deal"></i> deal
            </div>
        </div>
        <div class="buttonItem"> <span> cooperation</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon cooperation"></i> cooperation
            </div>
        </div>
        <div class="buttonItem"> <span> listBook</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon listBook"></i> listBook
            </div>
        </div>
        <div class="buttonItem"> <span> close</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon close"></i> close
            </div>
        </div>
        <div class="buttonItem"> <span> setUp</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon setUp"></i> setUp
            </div>
        </div>
        <div class="buttonItem"> <span> delete</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon delete"></i> delete
            </div>
        </div>
        <div class="buttonItem"> <span> bigLink</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon bigLink"></i> bigLink
            </div>
        </div>
        <div class="buttonItem"> <span> greenClock</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon greenClock"></i> greenClock
            </div>
        </div>
        <div class="buttonItem"> <span> greenClock</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon greenClock"></i> greenClock
            </div>
        </div>
        <div class="buttonItem"> <span> purpleLeaves</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon purpleLeaves"></i> purpleLeaves
            </div>
        </div>
        <div class="buttonItem"> <span> firstIcon</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon firstIcon"></i> firstIcon
            </div>
        </div>
        <div class="buttonItem"> <span> partner</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon partner"></i> partner
            </div>
        </div>
        <div class="buttonItem"> <span> seal</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon seal"></i> seal
            </div>
        </div>
        <div class="buttonItem"> <span> sealBook</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon sealBook"></i> sealBook
            </div>
        </div>
        <div class="buttonItem"> <span> editIcon</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon editIcon"></i> editIcon
            </div>
        </div>
        <div class="buttonItem"> <span> redDeal</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon redDeal"></i> redDeal
            </div>
        </div>
        <div class="buttonItem"> <span> voice</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon voice"></i> voice
            </div>
        </div>
        <div class="buttonItem"> <span> hammer</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon hammer"></i> hammer
            </div>
        </div>
        <div class="buttonItem"> <span> volume</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon volume"></i> volume
            </div>
        </div>
        <div class="buttonItem"> <span> left</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon left"></i> left
            </div>
        </div>
        <div class="buttonItem"> <span> square</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon square"></i> square
            </div>
        </div>
        <div class="buttonItem"> <span> down</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon down"></i> down
            </div>
        </div>
        <div class="buttonItem"> <span> right</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon right"></i> right
            </div>
        </div>
        <div class="buttonItem"> <span> refresh</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon refresh"></i> refresh
            </div>
        </div>
        <div class="buttonItem"> <span> forward</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon forward"></i> forward
            </div>
        </div>
        <div class="buttonItem"> <span> dev</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon dev"></i> dev
            </div>
        </div>
        <div class="buttonItem"> <span> mailList</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon mailList"></i> mailList
            </div>
        </div>
        <div class="buttonItem"> <span> headPortrait</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon headPortrait"></i> headPortrait
            </div>
        </div>
        <div class="buttonItem"> <span> timeLoop</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon timeLoop"></i> timeLoop
            </div>
        </div>
        <div class="buttonItem"> <span> searchFat</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon searchFat"></i> searchFat
            </div>
        </div>
        <div class="buttonItem"> <span> software</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon software"></i> software
            </div>
        </div>
        <div class="buttonItem"> <span> concentricCircle</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon concentricCircle"></i> concentricCircle
            </div>
        </div>
        <div class="buttonItem"> <span> searchThin</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon searchThin"></i> searchThin
            </div>
        </div>
        <div class="buttonItem"> <span> car</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon car"></i> car
            </div>
        </div>
        <div class="buttonItem"> <span> officialSeal</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon officialSeal"></i> officialSeal
            </div>
        </div>
        <div class="buttonItem"> <span> schedule</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon schedule"></i> schedule
            </div>
        </div>
        <div class="buttonItem"> <span> status</span> <br>
            <div class="layui-btn layui-btn-sm layui-btn-ys">
                <i class="buttonIcon status"></i> status
            </div>
        </div>
    </div>
</div>